<template>
    <div style="height:90%;overflow:auto">
        <el-form :model="ruleForm" :rules="rules" ref="form" label-width="100px" :loading="loading">
            <el-row>
                <el-col :span="12" class="imgdiv">
                    <el-form-item label="设置头像：">

                        <div v-if="ruleForm.imsUrl&&ruleForm.imsUrl!=''" style="display:flex">
                            <ImageCropper shape="circle" v-model="ruleForm.imsUrl" :height="100" :width="100">
                            </ImageCropper>
                            <el-image style="height:68px;width:68px;margin:0 20px;border-radius:50%" :src="ruleForm.imsUrl" fit="cover">
                            </el-image>
                            <el-image style="height:38px;width:38px;border-radius:50%" :src="ruleForm.imsUrl" fit="cover"></el-image>
                        </div>
                        <div v-else>
                            <div class="imgview">
                                <div style="width:100px;height:100px;;padding:4px">
                                    <span class="imgdes img100">{{ruleForm.username.slice(0,2)}}</span>
                                </div>
                                <div style="width:68px;height:68px;padding:4px">
                                    <span class="imgdes img68">{{ruleForm.username.slice(0,2)}}</span>
                                </div>
                                <div style="width:38px;height:38px;padding:4px">
                                    <span class="imgdes img38">{{ruleForm.username.slice(0,2)}}</span>
                                </div>

                            </div>
                            <ImageCropper shape="circle" v-model="ruleForm.imsUrl" :height="100" :width="100">
                            </ImageCropper>
                        </div>



                        <p class="tips">选择一张个人正面照片作为头像，企业成员可以更容易认识你</p>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名：" prop="username">
                        <el-input v-model="ruleForm.username"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="昵称：" prop="nickName">
                        <el-input v-model="ruleForm.nickName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="工号：" prop="employeeNo">
                        <el-input v-model="ruleForm.employeeNo"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="隐藏号码：" prop="isSecret">
                        <el-switch v-model="ruleForm.isSecret">
                        </el-switch>
                        <p class="tips">开启后，无法从通讯录中看到该号码</p>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="角色：" prop="roleId">
                        {{ruleForm.roleName}}
                        <!-- <select-role placeholder="请选择角色" v-model="ruleForm.roleId" :label.sync="ruleForm.roleName">
                        </select-role> -->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="状态：" prop="statusId">
                        <select-para v-model="ruleForm.statusId" :label.sync="ruleForm.statusName"
                            :options="sysParaObj['SP_QUES_STATUS']">
                        </select-para>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <fix-bottom-button position="center">
            <el-button type="success" @click="submitFun" :loading="loading">保存设置</el-button>
            <el-button @click="queryDetail">重置</el-button>
        </fix-bottom-button>
    </div>
</template>
<script>
    import FixBottomButton from '@/components/FixBottomButton';
    import ImageCropper from '@/components/ImageCropper';
    import selectRole from '@/components/selectRole';
    import selectPara from '@/components/selectPara';
    import {
        querySingleDeptUser,
        updateDeptUser,
    } from "@/service/core/userManage";
    import {
        commPara
    } from '@/mixins/mixins'
    import {
        mapState
    } from 'vuex';
    export default {
        components: {
            FixBottomButton,
            selectRole,
            ImageCropper,
            selectPara
        },
        mixins: [commPara],
        data() {
            return {
                loading: false,
                sysParaObj: {
                    'SP_QUES_STATUS': []
                },
                ruleForm: {
                    id: '', // 主键
                    nickName: '',
                    imsUrl: '',
                    username: '',
                    employeeNo: '',
                    mobile: '',
                    email: '',
                    deptId: '',
                    deptName: '',
                    roleId: [],
                    roleName: '',
                    statusId: '',
                    statusName: '',
                    isSecret: false,

                },
                rules: {
                    username: [{
                        required: true,
                        message: '姓名必填',
                        trigger: 'blur'
                    }, {
                        min: 0,
                        max: 10,
                        message: '长度限制10位',
                        trigger: 'blur'
                    }],
                    employeeNo: [{
                        required: true,
                        message: '员工工号必填',
                        trigger: 'blur'
                    }, {
                        min: 0,
                        max: 10,
                        message: '长度限制10位',
                        trigger: 'blur'
                    }],
                    nickName: [{
                        pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/,
                        message: '昵称只能是英文、数字和下划线组成，且必须以字母开头。',
                        trigger: 'blur'
                    }, {
                        min: 0,
                        max: 10,
                        message: '长度限制10位',
                        trigger: 'blur'
                    }],
                },
            }
        },
        created() {
            this.queryDetail()
        },
        computed: {
            ...mapState({
                token: state => state.token.token,
                userid: state => state.token.userid
            }),

        },
        methods: {
            resetForm() {
                this.queryDetail();
            },
            submitFun() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        let params = {
                            id: this.ruleForm.id, // 主键
                            imsUrl:this.ruleForm.imsUrl,
                            username: this.ruleForm.username,
                            nickName: this.ruleForm.nickName,
                            employeeNo: this.ruleForm.employeeNo,
                            deptId: this.ruleForm.deptId,
                            deptName: this.ruleForm.deptName,
                            userStatusId: this.ruleForm.statusId,
                            userStatusName: this.ruleForm.statusName,
                            isSecret: Number(this.ruleForm.isSecret),
                        }
                        this.loading = true
                        updateDeptUser(params).then(res => {
                            if (res.data.code == 1000) {
                                this.$notify({
                                    title: '提示',
                                    type: 'success',
                                    message: '修改成功！'
                                })
                                this.queryDetail()
                            }
                            this.loading = false
                        })
                    }
                })
            },
            queryDetail() { // 用户明细
                let params = {
                    id: this.userid
                }
                querySingleDeptUser(params).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if (data) {
                            this.ruleForm.id = data.id;
                            this.ruleForm.nickName = data.nickName
                            this.ruleForm.imsUrl = data.imsUrl
                            this.ruleForm.username = data.username;
                            this.ruleForm.employeeNo = data.employeeNo;
                            this.ruleForm.deptId = data.deptId;
                            this.ruleForm.deptName = data.deptName;
                            this.ruleForm.statusId = data.userStatusId
                            this.ruleForm.statusName = data.userStatusName
                            this.ruleForm.isSecret = Boolean(data.isSecret);
                            this.ruleForm.roleName = data.roleName;
                            if (data.roleId) {
                                this.ruleForm.roleId = data.roleId.split(',');
                            }


                        }
                    }
                })
            },
        },
    }

</script>
<style scoped>
    .imgview {
        display: flex;
        margin-bottom: 10px;
    }

    .imgdes {
        display: inline-block;
        width: 100%;
        height: 100%;
        background: #5fef5f;
        text-align: center;
        color: #fff;
        border-radius: 50%;
    }

    .img100 {
        line-height: 90px;
        font-size: 20px
    }

    .img68 {
        line-height: 58px;
        font-size: 16px;
        margin-top: 15px
    }

    .img38 {
        line-height: 28px;
        font-size: 12px;
        margin-top: 30px
    }

    .tips {
        color: rgb(153, 153, 153);
        font-size: 12px;
        line-height: 25px;

    }

    .imgdiv /deep/ .el-image__error {
        line-height: 1
    }

</style>
